<script setup lang='ts'>
import type { GameDetails } from '~/apis/types'

defineOptions({ name: 'AppCasinoGamesBottom' })

const route = useRoute()
const casinoStore = useCasinoStore()
const { isMobile } = storeToRefs(useWindowStore())
const { cateProviderData, casinoRecData, cateHotData } = storeToRefs(casinoStore)

const id = ref(route.query.id?.toString() ?? '')
const pn = ref(route.query.pn?.toString() ?? '')
const pid = ref(route.query.pid?.toString() ?? '')
const vid = ref(route.query.vid?.toString() ?? '')
const game_id = ref(route.query.game_id?.toString() ?? '')
const game_type = ref(route.query.type?.toString())
const gameDetails = ref<GameDetails>()
const realName = computed(() => gameDetails.value?.name ?? '')
const _api_game_type = computed(() => (vid.value === '309' ? '8' : game_type.value))
const paramEmpty = computed(() => {
  return !!(id.value || game_id.value)
})

const { runAsync: runGetGameDetail } = useRequest(() => ApiMemberGameDetail(id.value, pid.value || vid.value, game_id.value), {
  ready: paramEmpty,
  manual: true,
})

// const { list: recGameList } = useList(ApiMemberGameRecList, { manual: false })

function initData() {
  return new Promise<void>((resolve) => {
    runGetGameDetail().then((res) => {
      gameDetails.value = res

      if (res && res.game_type) {
        if (res.platform_name && res.platform_name.length)
          pn.value = res.platform_name

        game_type.value = res.game_type
        casinoStore.runGetCateHotData(_api_game_type.value ?? game_type.value)
          .finally(() => {
            resolve()
          })
      }
      else { resolve() }
    })
      .catch(() => {
        resolve()
      })
  })
}

await application.allSettled([initData()])
</script>

<template>
<div class="d">

  <AppSlideMulti 
  v-if="cateHotData" 
  :total="cateHotData.total" 
  :title="$t('suggest_games')" 
  :data="cateHotData.games"  
  :path="`/category?cid=100&ty=1${_api_game_type ? `&game_type=${_api_game_type}` : ''}`" 
  use-cloud-img />

  <AppSlideMulti 
  v-if="cateHotData" 
  cid="5"
  :total="cateHotData.total" 
  :title="cateProviderData?.name" 
  :data="cateProviderData?.venue.h5"  
   path="/provider"
  use-cloud-img />
</div>
</template>

<style lang='scss' scoped>

</style>
